<template>
   <div class="role_manager">
    <!-- 查询模块 -->
   <div class="query_form">
        <el-form :inline="true" :model="roleForm" class="demo-form-inline">
    <el-form-item label="角色名称">
      <el-input v-model="roleForm.roleName"  placeholder="请输入角色名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
    </div> 
<!-- 新增按钮 -->
    <!-- <div class="base_table"> -->
      <div class="action">
        <el-button type="primary" @click="roleAdd">创建</el-button>
      </div>
<!-- 需要增删改查的列表 -->
   <el-table 
      ref="multipleTableRef" 
      :data="roleList" 
      style="width: 100%"
      row-key="_id"
         :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="scope">
            <el-button type="primary" @click="roleEdit(scope.row)">编辑</el-button>
             <el-button type="primary" >设置权限</el-button>
            <el-button type="danger" @click="roleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table> 
  <!-- </div>  -->
    <!-- 弹框 -->
   <el-dialog v-model="showModel" title="角色新增" class="addUser">
      <el-form :model="roleForm" ref="dialogForm" :rules="rules">
       <el-form-item label="角色名称" prop="roleName" label-width="100px">
          <el-input v-model="roleForm.roleName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" prop="remark" label-width="100px">
          <el-input v-model="roleForm.remark" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
</div>

</template>

<script setup>
import api from "./../api"
import {reactive,ref,toRaw,nextTick}from 'vue'
import utils from "./../utils/utiles"

// 定义查询和重置
const query=()=>{
  
  getrolelist()
}
const reset=()=>{
 
  getrolelist()
}
//定义记录用户的行为
const action=ref('create')

// 定义弹窗变量，是否进行显示
const showModel=ref(false)
// 定义获取表单节点
const dialogForm=ref(null)
// 定义弹窗的添加方法
const roleAdd=()=>{
    action.value='create'
    showModel.value=!showModel.value
}
// 定义编辑弹窗的方法
const roleEdit=(row)=>{
    action.value='edit'
    showModel.value=!showModel.value
     nextTick(()=>{
        Object.assign(roleForm,row)
    })
}
// 定义删除弹窗的方法
const roleDel=async(row)=>{
    action.value='delete'
    console.log(row._id)
    let data={_id:row._id,action:action.value}
    await api.roleOperate(data)
    getrolelist()
    
}
// 定义输入正则
const rules=reactive({ 
        roleName: [
          {
            required: true,
            message: "请输入角色名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "长度在2-8个字符",
            trigger: "blur",
          },
        ],
         remark: 
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
})
const roleList = ref([])
// 定义角色名称列表来请求数据
const roleAllList=ref([])
// 定义列表请求参数
let roleForm=reactive({})
// 请求角色的列表
const getrolelist=async()=>{
  let {list}=await api.getroleList(roleForm)
  roleList.value=list
  console.log(roleList.value);
}
getrolelist()
// 请求角色名称列表
const getRoleAlllist=async()=>{
  let res =await api.getRoleAllList()
  roleAllList.value=res
  console.log(roleAllList.value);
}
getRoleAlllist()
//定义动态列表
const columns = reactive([
  {
    label: "角色名称",
    prop: "roleName",
    width:"150"
  },
  {
    label: "备注",
    prop: "remark",
  },
  {
    label: "权限列表",
    prop: "permissionList",
    // formatter(row, column, value) {
    //   return {
    //     1: "checkedKeys",
    //     2: "halfCheckedKeys",
    //   }[value];
    // },
  },
    {
    label: "更新时间",
    prop: "updateTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
  
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);
// 表单重置方法
const resetForm=()=>{
    dialogForm.value.resetFields()
}
// 定义提交按钮的方法
const handleSubmit=()=>{
    dialogForm.value.validate(async(valid)=>{
        if(valid){
    //         //发送请求
            let data=toRaw(roleForm)
            data.action=action.value
            console.log(data)
            let res=await api.roleOperate(data)
    //         //重置表单
            resetForm()
            //关闭弹窗
            showModel.value=!showModel.value
            //重新请求数据
            getrolelist()
        }
    })
}
</script>

<style lang="scss" scoped>

</style>